<template>
	<view>
		<u-sticky bgColor="#a3d8f5">
			<view class="mainpadding" :style="{paddingTop:menutop+'rpx'}">
				<view class="flexleft">
					<image src="@/static/image/system/hsz.png" class="hszclass" mode=""></image>
					<view class="xiaobai fonweight" style="font-size: 35rpx;">红十字基金会“孤寡老人大病救助基金”</view>
				</view>
				<view class="margin_top flexbetween">
					<u-icon name="arrow-left" color="#fff" size="24" @click="backpage()"></u-icon>
					<view class="xiaobai fonweight sanshier" style="font-size: 32rpx;">申请救助</view>
					<image src="@/static/image/system/list.png" mode="" class="topliclass" @click="toplistfn"></image>
				</view>
			</view>
		</u-sticky>
		<view class="ffffff mainpadding">
			<view class="ershiba xiaohei fonweight">患者信息
				<text class="ershiba xiaohong fonweight">*</text>
			</view>
			<view class="margin_top xiahuaxian flexleft">
				<view class="ershiba xiaohei margin_right2">姓名</view>
				<input placeholder="请输入" type="text" v-model="name" />
			</view>
			<view class="margin_top xiahuaxian flexleft">
				<view class="ershiba xiaohei margin_right2">性别</view>
				<u-radio-group v-model="sex" placement="row" circle>
					<u-radio activeColor="#d41c19" :customStyle="{marginRight: '30rpx'}" label="男" name="1"></u-radio>
					<u-radio activeColor="#d41c19" label="女" name="2"></u-radio>
				</u-radio-group>
			</view>
			<view class="margin_top xiahuaxian flexleft">
				<view class="ershiba xiaohei margin_right2">年龄</view>
				<input placeholder="请输入" type="number" v-model="age" />
			</view>

			<view class="margin_top xiahuaxian flexleft">
				<view class="ershiba xiaohei margin_right2">手机号（+86）</view>
				<input placeholder="请输入手机号" type="number" v-model="tel" />
			</view>
			<view class="margin_top xiahuaxian flexleft">
				<view class="ershiba xiaohei margin_right2">身份证号</view>
				<input placeholder="请输入" type="text" v-model="idcard" />
			</view>
			<view class="margin_top xiahuaxian flexleft">
				<view class="ershiba xiaohei margin_right2">户籍所在地</view>
				<input placeholder="请输入" type="text" v-model="hjszaddress" />
			</view>
			<view class="margin_top flexleft">
				<view class="ershiba xiaohei margin_right2">通讯住址</view>
				<input placeholder="请输入" type="text" v-model="txaddress" />
			</view>
		</view>
		<view class="ffffff mainpadding margin_top">
			<view class="ershiba xiaohei fonweight">其他信息
				<text class="ershiba xiaohong fonweight">*</text>
			</view>
			<view class="margin_top xiahuaxian flexleft">
				<view class="ershiba xiaohei margin_right2">领款人</view>
				<input placeholder="请输入" type="text" v-model="txaddress" />
			</view>
			<view class="margin_top xiahuaxian flexleft">
				<view class="ershiba xiaohei margin_right2">开户行</view>
				<input placeholder="请输入手机号" type="text" v-model="khbank" />
			</view>
			<view class="margin_top flexleft">
				<view class="ershiba xiaohei margin_right2">账号</view>
				<input placeholder="请输入" type="number" v-model="zh" />
			</view>
		</view>
		<view class="ffffff mainpadding margin_top">
			<view class="ershiba xiaohei fonweight">申请救助原因
				<text class="ershiba xiaohong fonweight">*</text>
			</view>
			<view class="flexleft flex_wrap" style="padding-top: 20rpx;">
				<view class=" margin_right1 margin_top1" :class="item.name==jzyy?'lvbtn':'huibtn'"
					v-for="item in jzapplyReson" :key="item.id" @click="jzyy=item.name">{{item.name}}</view>

			</view>
			<textarea style="width: 100%;" class="margin_top textarea" placeholder="可简单描述您的症状或病情..." maxlength="-1" 
				v-model="bqzk"></textarea>
		</view>
		<view class="ffffff mainpadding margin_top">
			<view class="ershiba xiaohei fonweight">检查结果
				<text class="ershiba xiaohong fonweight">*</text>
			</view>
			<view class="flexleft flex_wrap">
				<view class="flexcenter tpbox " v-for="(item,index) in images_text" :key="index">
					<view class="tjtp">
						<image class="tjtp" :src="item" mode=""></image>
						<view class="deleteimg" @click="delindex(index,images,images_text)"></view>
					</view>
				</view>
				<view class="flexcenter tpbox " @click="flag=1;uploadImg(6)">
					<image class="tjtp" src="@/static/image/system/tjtp.png" mode=""></image>
				</view>
			</view>
			<view class="xiaohui ershiba margin_top">请上传检验报告或影像资料</view>
		</view>
		<view class="ffffff mainpadding margin_top">
			<view class="ershiba xiaohei fonweight">身份证件上传
				<text class="ershiba xiaohong fonweight">*</text>
			</view>
			<view class="xiaohui ershiba margin_top">被救助人身份证上传</view>
			<view class="flexbetween margin_top">
				<image :src="zzidcard_zimage_text" class="sfztp" mode="" v-show="zzidcard_zimage_text"
					@click="flag=2;uploadImg(1)"></image>
				<image src="../../static/image/system/sfzzm.png" class="sfztp" mode="" v-show="!zzidcard_zimage_text"
					@click="flag=2;uploadImg(1)"></image>
				<image :src="zzidcard_fimage_text" class="sfztp" mode="" v-show="zzidcard_fimage_text"
					@click="flag=3;uploadImg(1)"></image>
				<image src="../../static/image/system/sfzfm.png" class="sfztp" mode="" v-show="!zzidcard_fimage_text"
					@click="flag=3;uploadImg(1)"></image>
			</view>
			<view class="xiaohui ershiba margin_top">法定监护人身份证上传</view>
			<view class="flexbetween margin_top">
				<image :src="fdidcard_zimage_text" class="sfztp" mode="" v-show="fdidcard_zimage_text"
					@click="flag=4;uploadImg(1)"></image>
				<image src="../../static/image/system/sfzzm.png" class="sfztp" mode="" v-show="!fdidcard_zimage_text"
					@click="flag=4;uploadImg(1)"></image>
				<image :src="fdidcard_fimage_text" class="sfztp" mode="" v-show="fdidcard_fimage_text"
					@click="flag=5;uploadImg(1)"></image>
				<image src="../../static/image/system/sfzfm.png" class="sfztp" mode="" v-show="!fdidcard_fimage_text"
					@click="flag=5;uploadImg(1)"></image>
			</view>
		</view>
		<!-- <view class="ffffff mainpadding margin_top">
			<view class="flexleft">
				<view class="ershiba xiaohei margin_right2">信息复核人</view>
			</view>
		</view> -->
		<view class="mainpadding">
			<view class="bigbtn" @click="submit">加密提交</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				// #ifdef H5
				menutop: 80,
				// #endif
				// #ifdef MP-WEIXIN
				menutop: 0,
				// #endif	
				jzapplyReson: [],
				jzyy: "",
				name: "",
				sex: "1",
				age: "",
				tel: "",
				idcard: "",
				hjszaddress: "",
				txaddress: "",
				lkname: "",
				khbank: "",
				zh: "",
				jzyy: "",
				bqzk: "",
				images: [],
				images_text: [],
				zzidcard_zimage: "",
				zzidcard_fimage: "",
				fdidcard_zimage: "",
				fdidcard_zimage: "",
				zzidcard_zimage_text: "",
				zzidcard_fimage_text: "",
				fdidcard_zimage_text: "",
				fdidcard_fimage_text: "",
				flag: 1, //1检查结果，2被资助人身份证正面，3被资助人身份证反面，4监护人身份证正面，5监护人身份证反面，
				listid:""
			}
		},
		onLoad(options) {
			// #ifdef MP-WEIXIN
			this.menutop = uni.getMenuButtonBoundingClientRect().top * 2
			// #endif
			this.listid = options.id
			this.getDetail()
			this.getyy()
		},
		methods: {
			getDetail(){
				httpRequest.request('/api/user/jzapplyDetail', 'GET', {
					id: this.listid,
				}).then(res => {
					let data = res.data
					this.jzyy = data.jzyy
					this.name = data.name
					this.sex = data.sex
					this.age = data.age
					this.tel = data.tel
					this.idcard = data.idcard
					this.hjszaddress = data.hjszaddress
					this.txaddress = data.txaddress
					this.lkname = data.lkname
					this.khbank = data.khbank
					this.zh = data.zh
					this.jzyy = data.jzyy
					this.bqzk = data.bqzk
					this.images = data.jcjg_images.split(',')
					this.images_text = data.jcjg_images_text
					this.zzidcard_zimage = data.zzidcard_zimage
					this.zzidcard_fimage = data.zzidcard_fimage
					this.fdidcard_zimage = data.fdidcard_zimage
					this.fdidcard_zimage = data.fdidcard_zimage
					this.zzidcard_zimage_text = data.zzidcard_zimage_text
					this.zzidcard_fimage_text = data.zzidcard_fimage_text
					this.fdidcard_zimage_text = data.fdidcard_zimage_text
					this.fdidcard_fimage_text = data.fdidcard_fimage_text
				}).catch(err => {})
			},
			submit() {
				if (this.name == "") {
					httpRequest.toast("请输入姓名")
					return false
				}
				if (this.age == "") {
					httpRequest.toast("请输入年龄")
					return false
				}
				if (this.tel == "") {
					httpRequest.toast("请输入手机号")
					return false
				}
				if (this.idcard == "") {
					httpRequest.toast("请输入手机号")
					return false
				}
				if (this.hjszaddress == "") {
					httpRequest.toast("请输入户籍所在地")
					return false
				}
				if (this.lkname == "") {
					httpRequest.toast("请输入领款人")
					return false
				}
				if (this.khbank == "") {
					httpRequest.toast("请输入开户行")
					return false
				}
				if (this.zh == "") {
					httpRequest.toast("请输入账号")
					return false
				}
				if (this.jzyy == "") {
					httpRequest.toast("请选择救助原因")
					return false
				}
				if (this.bqzk == "") {
					httpRequest.toast("请输入病情描述")
					return false
				}
				if (this.images.length == 0) {
					httpRequest.toast("请上传检查结果照片")
					return false
				}
				if (this.zzidcard_zimage == "") {
					httpRequest.toast("请上传被资助人身份证正面照片")
					return false
				}
				if (this.zzidcard_fimage == "") {
					httpRequest.toast("请上传被资助人身份证反面照片")
					return false
				}
				if (this.fdidcard_zimage == "") {
					httpRequest.toast("请上传监护人身份证正面照片")
					return false
				}
				if (this.fdidcard_fimage == "") {
					httpRequest.toast("请上传监护人身份证反面照片")
					return false
				}

				let url = "/api/user/jzapplyAgin"
				let data = {
					name: this.name,
					sex: this.sex,
					age: this.age,
					tel: this.tel,
					idcard: this.idcard,
					hjszaddress: this.hjszaddress,
					txaddress: this.txaddress,
					lkname: this.lkname,
					khbank: this.khbank,
					zh: this.zh,
					jzyy: this.jzyy,
					bqzk: this.bqzk,
					jcjg_images: this.images.join(),
					zzidcard_zimage: this.zzidcard_zimage,
					zzidcard_fimage: this.zzidcard_fimage,
					fdidcard_zimage: this.fdidcard_zimage,
					fdidcard_fimage: this.fdidcard_fimage,
					id:this.listid
				}
				httpRequest.request(url, 'GET', data).then(res => {
					httpRequest.toast(res.msg)
					if(res.code==1){
						setTimeout(()=>{
							uni.navigateBack(1)
						},1000)
					}
				})
			},
			getyy() {
				httpRequest.request('/api/user/jzapplyReson', 'GET', {}).then(res => {
					this.jzapplyReson = res.data
				}).catch(err => {})
			},
			uploadImg(value) { //上传图片
				let _this = this;
				uni.showActionSheet({
					itemList: ['相机', '相册'],
					success: function(res) {
						// 选择相机走0
						if (res.tapIndex == 0) {
							httpRequest.chooseImage(value, ['camera']).then(res => {
								for (var i = 0; i < res.length; i++) {
									_this.uploadImageService(res[i])
								}
							}).catch(err => {});
						}
						// 选择相册走1
						if (res.tapIndex == 1) {
							httpRequest.chooseImage(value, ['album']).then(res => {
								for (var i = 0; i < res.length; i++) {
									_this.uploadImageService(res[i])
								}
							}).catch(err => {});
						}
					},
					fail: function(res) {}
				});
			},
			delindex(index, upImg, upImgs_text) {
				upImg.splice(index, 1)
				upImgs_text.splice(index, 1)
			},
			uploadImageService(url) {
				let _this = this;
				httpRequest.uploadFile('/api/common/upload', url).then(res => {
					let image_item = res.fullurl;
					if (this.flag == 1) {
						this.images.push(res.url)
						this.images_text.push(image_item);
					}
					if (this.flag == 2) {
						this.zzidcard_zimage = res.url
						this.zzidcard_zimage_text = image_item
					}
					if (this.flag == 3) {
						this.zzidcard_fimage = res.url
						this.zzidcard_fimage_text = image_item
					}
					if (this.flag == 4) {
						this.fdidcard_zimage = res.url
						this.fdidcard_zimage_text = image_item
					}
					if (this.flag == 5) {
						this.fdidcard_fimage = res.url
						this.fdidcard_fimage_text = image_item
					}
				}).catch(err => {});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.huibtn {
		background: #F9F9F9;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		padding: 15rpx 30rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #777777;
	}

	.lvbtn {
		background: rgba(255, 0, 0, .04);
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		padding: 15rpx 30rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #ff0000;
	}

	.sfztp {
		width: 300rpx;
		height: 180rpx;
	}
</style>